<!-- 视频检测页面 -->
<div id="video" class="page-content">
    <div class="dashboard-card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-video"></i> 视频检测控制
            </div>
        </div>
        
        <div class="video-controls">
            <div class="video-buttons">
                <button type="button" id="startVideoBtn" class="btn btn-success">
                    <i class="fas fa-play"></i> 开始检测
                </button>
                <button type="button" id="stopVideoBtn" class="btn btn-danger" style="display: none;">
                    <i class="fas fa-stop"></i> 停止检测
                </button>
                <button type="button" id="captureBtn" class="btn btn-primary" style="display: none;">
                    <i class="fas fa-camera"></i> 截图
                </button>
            </div>
        </div>
    </div>

    <div class="dashboard-card">
        <div class="card-header">
            <div class="card-title">
                <i class="fas fa-eye"></i> 视频预览
            </div>
            <div class="video-stats">
                <span class="stat-item">
                    <i class="fas fa-users"></i>
                    检测到: <span id="detectedFaces">0</span> 人
                </span>
                <span class="stat-item">
                    <i class="fas fa-clock"></i>
                    FPS: <span id="currentFPS">0</span>
                </span>
                <span class="stat-item">
                    <i class="fas fa-user-check"></i>
                    已识别: <span id="recognizedFaces">0</span> 人
                </span>
                <span class="stat-item">
                    <i class="fas fa-history"></i>
                    检测次数: <span id="detectionCount">0</span>
                </span>
            </div>
        </div>
        
        <div class="video-container">
            <video id="videoElement" autoplay muted style="display: none;">
                您的浏览器不支持视频播放
            </video>
            <canvas id="videoCanvas" style="display: none;"></canvas>
            <div id="videoPlaceholder" class="video-placeholder">
                <i class="fas fa-video-slash"></i>
                <h3>视频预览区域</h3>
                <p>点击"开始检测"按钮开始视频检测</p>
            </div>
            
            <!-- 实时用户信息显示区域 -->
            <div id="liveUserInfo" class="live-user-info" style="display: none;">
                <div class="user-info-header">
                    <i class="fas fa-users"></i>
                    <span>实时检测信息</span>
                    <button id="toggleHistory" class="history-toggle" title="查看检测历史">
                        <i class="fas fa-history"></i>
                    </button>
                </div>
                <div id="userInfoContent" class="user-info-content">
                    <!-- 用户信息将在这里动态显示 -->
                </div>
                <div id="detectionHistory" class="detection-history" style="display: none;">
                    <div class="history-header">
                        <span>检测历史</span>
                        <button id="clearHistory" class="clear-history-btn">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                    <div id="historyContent" class="history-content">
                        <!-- 检测历史将在这里显示 -->
                    </div>
                </div>
            </div>
        </div>
        
        <div id="videoResult" class="video-result"></div>
    </div>
</div> 